 <link rel="stylesheet" href="{{ App.baseUrl }}/js/jqwidgets/styles/jqx.base.css" type="text/css" />
 <link href="{{ App.baseUrl }}/js/plugin/uploader/fileuploader.css" rel="stylesheet" type="text/css" />	
 
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxtree.js"></script>
	<script type="text/javascript" src="{{ App.baseUrl }}/js/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="{{ App.baseUrl }}/js/jquery/jquery.blockUI.js"></script>
	<script type="text/javascript" src="{{ App.baseUrl }}/js/app/common.js"></script>
	<script type="text/javascript" src="{{ App.baseUrl }}/js/jquery/jquery.numeric.js"></script>
	
	<script type="text/javascript" src="{{ App.baseUrl }}/js/plugin/uploader/fileuploader.js" ></script>
	
<script type="text/javascript">
	$(function(){
		$('#divCategoryTree').block({ message: 'Loading ...' }); 
		$("input.numeric").numeric();
		
    	var source =
        {
        	datatype: "json",
            datafields: [
            	{ name: 'id' },
                { name: 'parent_id' },
                { name: 'name' }
            ],
            id: 'categoriesSource',
            url: '{{ App.baseUrl }}/event/category/getTree',
            root : 'categories'
        };
		
	        var dataAdapter = new $.jqx.dataAdapter(source, {
	        	 loadComplete: function () {
		        	 var records = dataAdapter.getRecordsHierarchy('id', 'parent_id', 'items', [{name: 'name', map: 'label'}, {name: 'id', map: 'value'}]);

		 	        $('#categoryTree').jqxTree({ source: records, width: '300px', height: '200px' , checkboxes: true, hasThreeStates: true});
		 	       $('#divCategoryTree').unblock(); 
	        	 }
		    });
	        dataAdapter.dataBind();

	        $("#categoryIds").val("1,2,3,4");

		createUploader();
	});

	function createUploader(){            
        var uploader = new qq.FileUploader({
            element: document.getElementById('file_image'),
            action: '{{ App.baseUrl }}/test/upload',
            //debug: true,
            onComplete: function(id, fileName, responseJSON){
            	
            } 
        });           
    }
	
	function tbnSave_click()
	{
		var items = $('#categoryTree').jqxTree('getItems');

		var checkedItems = new Array();
		$.each(items, function () {
			if (this.checked) {
				checkedItems[checkedItems.length] = this.value;
			}
		});

		$("#categoryIds").val(checkedItems.join());
		
		$.ajax({
			url : "{{ App.baseUrl }}/event/product/create",
			type : 'post',
			dataType : 'json',
			data: $('#frmProduct').serialize(),
			success: function(data)
			{
				common.validate("frmProduct", data);		
			}
		});
	}
	
</script>

<div class="form">
 {% set _form = this.beginWidget('CActiveForm', {
	'id':'frmProduct',
	'enableAjaxValidation':false,                  
 }) %}
 
 <div class="row">
		{{ _form.labelEx(model,'name') }}
		{{ _form.textField(model,'name', {'id' : 'Product_name'}) }}
		<div id="Product_name_msg" class="errorMessage"></div>
	</div>

	 <div class="row" id="divCategoryTree"  style="width:300px; min-height:200px;">
	 <label>Category</label>
		<div id="categoryTree">
		</div>
	</div>
	
	<div class="row">
		{{ _form.labelEx(model,'description') }}
		{{ _form.textField(model,'description', {'id' : 'Product_description'}) }}
		{{ _form.error(model,'description') }}
	</div>

	<div class="row">
		{{ _form.labelEx(model,'price') }}
		{{ _form.textField(model,'price', {'id' : 'Product_price', 'class':'numeric'}) }}
		<div id="Product_price_msg" class="errorMessage"></div>
	</div>

	<div class="row">
		{{ _form.labelEx(model,'is_publish') }}
		{{ _form.textField(model,'is_publish') }}
		{{ _form.error(model,'is_publish') }}
	</div>

	<div class="row">
		{{ _form.labelEx(model,'is_recommend') }}
		{{ _form.textField(model,'is_recommend') }}
		{{ _form.error(model,'is_recommend') }}
	</div>

	<div class="row">
		{{ _form.labelEx(model,'image') }}
		<div id="file_image" ></div>
	</div>
 	
 	<input type="hidden" name="categoryIds" id="categoryIds"/>
 	
 	<div class="row buttons">
 		<input type="button" value="Create" id="btnSave" onclick="tbnSave_click();" /> 	 	 	
	</div>
 	
 	
{{ void(this.endWidget()) }}
</div>